<style scoped>
    .income{
        color: red;
    }
    .expend{
        color:green;
    }
</style>
<template>
    <div class="page-container">
        <a-tabs v-model="activeTab" @change="callback">
            <a-tab-pane tab="日汇总" key="month">
                <a-table bordered :scroll="{y: tableHeight }" :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                    <template slot="income" slot-scope="text,record,index">
                        <p class="income">+{{fmMoney(record.incomeAmount,2)}}元</p>
                        <p>{{record.incomeCount}}笔</p>
                    </template>
                    <template slot="expend" slot-scope="text,record,index">
                        <p class="expend">-{{fmMoney(record.expendAmount,2)}}元</p>
                        <p>{{record.expendCount}}笔</p>
                    </template>
                    <template slot="operation" slot-scope="text,record">
                        <a @click="onDetail(record.date)" class="ant-btn-text"><a-icon type="search" /></a>
                    </template>
                </a-table>
            </a-tab-pane>
            <a-tab-pane tab="月汇总" key="year">
                <a-table bordered :scroll="{y: tableHeight }" :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                    <template slot="income" slot-scope="text,record,index">
                        <p class="income">+{{fmMoney(record.incomeAmount,2)}}元</p>
                        <p>{{record.incomeCount}}笔</p>
                    </template>
                    <template slot="expend" slot-scope="text,record,index">
                        <p class="expend">-{{fmMoney(record.expendAmount,2)}}元</p>
                        <p>{{record.expendCount}}笔</p>
                    </template>
                    <template slot="operation" slot-scope="text,record">
                        <a @click="onDetail(record.date)"  class="ant-btn-text"><a-icon type="search" /></a>
                    </template>
                </a-table>
            </a-tab-pane>
            <a-month-picker slot="tabBarExtraContent" :disabledDate="disabledMonth"
                            v-if="activeTab === 'month'"
                            v-model="params.monthMom" @change="onChangeMonth" placeholder="请选择月份" />
            <a-select slot="tabBarExtraContent" v-else style="width: 165px" placeholder='请选择收银员' v-model="params.year" @change="onChangeYear">
                <a-select-option v-for="year in yearList" :value="year" >{{year}}</a-select-option>
            </a-select>
        </a-tabs>
    </div>
</template>

<script>
    import moment from 'moment';
    import {findRiderBillList} from "../../api/bill";
    import {fmMoney} from "../../utils";
    let tableHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight) - 220;
    const columns = [
        {title: '日期', dataIndex: 'date',width: 100,align:'center'},
        {title: '收入(元)',dataIndex: 'income',width: 200,align:'center',scopedSlots: { customRender: 'income' }},
        {title: '支出(元)',dataIndex: 'expend',width: 200,align:'center',scopedSlots: { customRender: 'expend' }},
        {title: '操作',key: 'operation',align:'center',width:100,scopedSlots: { customRender: 'operation' }}];
    export default {
        data(){
            return{
                params:{
                    monthMom:moment(),
                    month:moment().format("YYYY-MM"),
                    year:'2019',
                    type:'month',
                },
                activeTab:'month',
                dataList:[],
                columns,
                loading:false,
                tableHeight,
                yearList:[],

            }
        },
        methods:{
            moment,fmMoney,
            disabledMonth(current){
                return current > moment().endOf('day');
            },
            callback(key){
                this.params.type = key;
                this.onLoad();
            },
             onChangeMonth(date){
                this.params.month = date.format("YYYY-MM"),
                this.onLoad();
            },
            onChangeYear(){
                this.onLoad();
            },
            onDetail(date){
                var beginDate = '';
                var endDate = '';
                if(this.params.type == 'month'){
                    beginDate = date+' 00:00:00';
                    endDate = date+' 23:59:59';
                }
                if(this.params.type == 'year'){
                    var d = moment(date,"YYYY-MM");
                    beginDate = d.startOf("month").format("YYYY-MM-DD 00:00:00");
                    endDate = d.endOf("month").format("YYYY-MM-DD 23:59:59");
                }
                this.$router.push({name:'RiderBillDetail',query:{beginDate:beginDate,endDate:endDate,date:date}});
            },
            async onLoad(){
                this.loading = true;
                let resp = await findRiderBillList(this.params);
                this.loading = false;
                if(this.qUtil.validResp(resp)){
                    this.dataList = resp.data.dataList;
                }
            },
        },
        beforeMount(){
            var date = new Date();
            var current = date.getFullYear();
            var len = current - 2018;
            var yearList = [2018];
            for(var i = 1;i<=len;i++){
                yearList.push(2018+i)
            }
            this.yearList = yearList;
            this.params.year = yearList[yearList.length-1];
        },
        mounted(){
            this.onLoad();

        }
    }
</script>
